<template>
  <view class="com-chat-emoji">
    <span class="emoji-item" v-for="(item, key) in emoji" @click="onClick(key)">
      <img :src="item.img">
    </span>
  </view>
</template>

<script>
  import emojiObj from '../static/emoji.js'
  
  export default {
    data () {
      return {
        emoji: emojiObj.emojiList.emoji
      }
    },
	methods:{
		onClick(key) {
			this.$emit("addEmoji", key)
		}
	}
  }
</script>

<style scoped lang="scss">
  .com-chat-emoji {
    height: 400rpx;
    overflow: auto;
    padding: 20rpx;
  }
  .emoji-item {
    display: inline-block;
    width: 56rpx;
    height: 56rpx;
    padding: 4rpx;
    vertical-align: middle;
    cursor: pointer;
    img {
      width: inherit;
      height: inherit;
    }
  }
</style>
